<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">
       <h1 v-for="b in books">{{b}}</h1>
        <br>
       <!--value(值),index(下标)   处理普通数组  -->
       <h1 v-for="(b,index) in books">{{b}}--{{index}}</h1>
       <br>
       <!--value(值),key(键)  处理对象  -->
       <h1 v-for="(value,key) in book">{{value}}---{{key}}</h1>
       <br>
       <!--value(值),index(下标)  处理对象数组（集合）  -->

       <h1 v-for="(value,index) in bs">{{value.name}}--{{value.author}}--{{index}}</h1>

       <!--
       value:{name:'老王和小红的故事1',author:'老王'}
       -->
       <!---->
       <hr>
       <div v-for="(value,index) in bs">
           <h1 v-for="(value,key,i) in value">
               {{value}}--{{key}}--{{i}}
           </h1>
       </div>


   </div>
   <!--    {{msg}}-->
       <script src="js/vue.js"></script>
       <script type="text/javascript">
           //1,创建vue对象
           const app = new Vue({
               el:"#app",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
               data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                  books:['jvm精讲','mysql从入门到删库','java入门到放弃'],
                  book:{name:'老王和小红的故事',author:'老王'},
                  bs:[{name:'老王和小红的故事1',author:'老王'},
                      {name:'老王和小红的故事2',author:'老王'}]
               }
           });
       </script>

</body>
</html>